<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>个人博客-分类页</title>
    <!-- 引入vue.js -->
    <script src="../node_modules/vue/dist/vue.js"></script>
    <!-- 引入vue-resource -->
    <script src="https://cdn.jsdelivr.net/npm/vue-resource@1.5.1"></script>
    <!-- 引入Element-UI样式 -->
    <link
      rel="stylesheet"
      href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"
    />
    <!-- 引入Element-UI组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <!-- 基本样式 -->
    <link rel="stylesheet" href="../assets/css/reset.css" />
    <link rel="stylesheet" href="../assets/css/category.css" />
    <link rel="stylesheet" href="../assets/css/common.css" />
    <!-- icon -->
    <link
      rel="stylesheet"
      href="//at.alicdn.com/t/font_3010787_sbtn2g4e0o.css"
    />
  </head>
  <body>
    <div id="app" class="container">
      <!-- 顶栏 -->
      <header class="header grid">
        <div class="logo-wrapper grid-cell u-lof4">
          <img src="../assets/images/Logo01.png" alt="" />
        </div>
        <div class="menu grid-cell">
          <el-menu
            :default-active="activeIndex"
            class="el-menu-demo"
            mode="horizontal"
            @select="handleSelect"
            active-text-color="#f13b3a"
          >
            <el-menu-item index="1">Home</el-menu-item>
            <el-submenu index="2">
              <template slot="title">Category</template>
              <el-menu-item
                v-for="category in categories"
                :key="category.category_id"
                :index="`2-${category.category_id}`"
                >{{category.category_alias}}</el-menu-item
              >
            </el-submenu>
            <el-menu-item index="3">Contact Author</el-menu-item>
          </el-menu>
        </div>
        <div class="login grid-cell u-lof4">
          <a href="">
            <i class="el-icon-user-solid"></i>
            Administrator Login
          </a>
        </div>
      </header>
      <div class="main">
        <div class="top">
          <h1>{{category}}</h1>
          <span><a href="./index.html">首页</a></span>
          <span>{{category}}</span>
        </div>
        <div class="center">
          <div class="blogs" v-for="blog in blogs" :key="blog.article_id">
            <h3 class="title">{{blog.title}}</h3>
            <img src="../assets/images/bg2-index.jpg" alt="" />
            <p class="abstract">{{blog.abstract}}</p>
            <div class="splite"></div>
            <el-row>
              <el-col :span="8"
                ><a :href="['./blog.html?'+blog.article_id]"
                  ><i class="iconfont icon-yuedu"></i> Continue Reading</a
                ></el-col
              >
              <el-col :span="5" :offset="3"
                ><a href="#"
                  ><i class="iconfont icon-shijian"></i>{{blog.pubdate}}</a
                ></el-col
              >
              <el-col :span="4"
                ><a href="#"
                  ><i class="iconfont icon-zuozhe"></i>{{blog.author}}</a
                ></el-col
              >
              <el-col :span="2"
                ><a href="#"
                  ><i class="iconfont icon-dianjiliang"></i>{{blog.clicks}}</a
                ></el-col
              >
            </el-row>
          </div>
        </div>
        <!-- 分页器 -->
        <el-pagination
          background
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-size="pageSize"
          layout="total, prev, pager, next"
          :total="total"
        >
        </el-pagination>
      </div>
      <!-- 底部 -->
      <footer>
        <img src="../assets/images/Logo01.png" alt="logo" />
        <div>
          <el-button
            v-for="category in categories"
            type="info"
            round
            size="mini"
          >
            <a
              :href="['./category.html?'+category.category_id]"
              style="color: #fff"
              >{{category.category_alias}}</a
            >
          </el-button>
        </div>
        <div class="contact">
          <a href="#"><i class="iconfont icon-weixin"></i></a>
          <a href="#"><i class="iconfont icon-qq"></i></a>
          <a href="#"><i class="iconfont icon-facebook"></i></a>
        </div>
      </footer>
      <!-- 版权 -->
      <div class="copyright">
        Copyright © 2021.XinZhongDi Education All rights reserved
      </div>
    </div>

    <script>
      const vm = new Vue({
        el: '#app',
        data() {
          return {
            currentPage: 1,
            total: null,
            blogs: [],
            pageSize: 10,
            category_id: null,
            activeIndex: '2-1',
            categories: [],
          }
        },
        created() {
          //从URL解析类id
          this.category_id = location.search.replace('?', '')
          this.getCategories()
          this.getblogs()
        },
        methods: {
          getblogs() {
            this.$http
              .get('http://127.0.0.1:7001/API/V1/articles', {
                params: {
                  offset: (this.currentPage - 1) * this.pageSize,
                  pagesize: this.pageSize,
                  category: `${this.category}`,
                },
              })
              .then((res) => {
                const {
                  data: {
                    result: { article_infos },
                  },
                } = res
                console.log(article_infos)
                this.blogs = article_infos
              })
            //console.log(result)

            //获取当前页码
            //获取当前类别
            //发送请求
            //更新blogs数据
          },

          getCategories() {
            //发送请求所有类别
            this.$http
              .get('http://127.0.0.1:7001/API/V1/categories/statistics')
              .then((res) => {
                const {
                  data: { result },
                } = res
                this.categories = result.category_statistics
                this.total = result.category_statistics.article_total
              })
          },
          handleSelect(key, keyPath) {
            let id = key.split('-')[1]
            //当点击某个类别时, 跳转页面
            if (key.split('-')[0] == 2) {
              window.location.href = './category.html?' + id
              this.activeIndex = `2-${id}`
            }
            if (key.split('-')[0] == 1) {
              window.location.href = './index.html'
              this.activeIndex = '1'
            }
            if (key.split('-')[0] == 3) {
              window.location.href = './contactAuthor.html'
              this.activeIndex = '3'
            }
          },
          handleCurrentChange(val) {
            console.log(`当前页: ${val}`)
          },
        },
        computed: {
          // 根据URL得到当前的类别名称
          category() {
            //console.log(location)
            //console.log(this.categories)
            const index = this.categories.findIndex(
              (item) => item.category_id == this.category_id
            )
            //console.log(index)
            return this.categories[index].category_alias
          },
        },
        watch: {
          currentPage() {
            this.getblogs()
          },
        },
        // watch: {
        //   total() {
        //     this.$http
        //       .get('http://127.0.0.1:7001/API/V1/articles', {
        //         params: {
        //           category: this.category,
        //         },
        //       })
        //       .then((res) => {
        //         const {
        //           data: {
        //             result: { total },
        //           },
        //         } = res
        //         console.log(total)
        //         return total
        //       })
        //   },
        //   blogs() {
        //     this.$http
        //       .get('http://127.0.0.1:7001/API/V1/articles', {
        //         params: {
        //           offset: (this.currentPage - 1) * this.pageSize,
        //           pagesize: this.pageSize,
        //           category: `${this.category}`,
        //         },
        //       })
        //       .then((res) => {
        //         const {
        //           data: {
        //             result: { article_infos },
        //           },
        //         } = res
        //         this.blogs = article_infos
        //       })
        //     //console.log(result)

        //     //获取当前页码
        //     //获取当前类别
        //     //发送请求
        //     //更新blogs数据
        //   },
        // },
      })
    </script>
  </body>
</html>
